<template>
<div class="component-list exp-component-list">
    <el-input class="search-inpt" clearable placeholder="输入搜索内容" v-model="filterText"></el-input>
    <el-scrollbar class="my-scrollbar">
        <el-tree
            class="filter-tree"
            draggable
            @node-drag-start="handleDragStart"
            :allow-drag="allowDrag"
            :allow-drop="allowDrop"
            :data="treeData"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree">
            <span slot-scope="{data}">
                <i class="tree-node-icon" :class="`iconfont ${data.icon}`"></i>
                <span>{{data.name}}</span>
            </span>
        </el-tree>
    </el-scrollbar>
</div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
    name: 'ComponentList',
    props: {
        treeData: {
            type: Array,
            required: true
        }
    },
    data () {
        return {
            filterText: ''
        }
    },
    watch: {
        filterText (val) {
            this.$refs.tree.filter(val)
        }
    },
    methods: {
        ...mapMutations({
            setNode: 'experiment/setNode'
        }),
        handleDragStart (node) {
            this.setNode(node.data)
        },
        filterNode (value, data) {
            if (!value) return true
            return data.name.indexOf(value) !== -1
        },
        allowDrag (node) {
            return node.childNodes.length === 0
        },
        allowDrop () {
            return false
        }
    }
}
</script>

<style lang="less">
    .exp-component-list {}
</style>
